<template>
	<view>
		<view class="chat" @click="initContent" v-if="user.status !== '876ea4f21078c7d38e3b0bdc74a'">
			<view class="chatWidthMe">
				<image class="leftImg" src="../../static/img/me.jpg"></image>
				<view class="center">
					<view class="time">{{(userData.time||0) | format}}</view>
					<view class="name">ttzxh</view>
					<view class="content">{{userData.message||""}}</view>
				</view>
				<view class="right">
					<view>></view>
				</view>
			</view>
		</view>
		<view v-if="user.status === '876ea4f21078c7d38e3b0bdc74a'">
			<view v-for="(item, index) in currentMenuItem" :key="currentMenuItem.username">
				<view class="chat" @click="initContent(item)">
					<view class="chatWidthMe">
						<image class="leftImg" :src="item.avatar"></image>
						<view class="center">
							<view class="time">{{ item.time | format }}</view>
							<view class="name">{{ item.realname }} {{ item.username }}</view>
							<view class="content">{{ item.message }}</view>
						</view>
						<view class="right">
							<view>></view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { formatTime } from '../../formatTime.js';
import glob from "../../glob.js"
export default {
	data() {
		return {
			user: {},
			initChatUser: [],
			currentMenuItem: [],
			chatData: [],
			lastUsername:"2628735401",
			allNum:0,
			userData:{time:0,message:""},
			
		};
	},
	props: {
		chatMenu: {
			type: Array,
			default() {
				return [];
			}
		}
	},
	computed:{
		num(){
			return this.allNum - uni.getStorageSync("Num")
		}
	},
	filters: {
		format(val) {
			return formatTime(parseInt(val));
		}
	},
	created() {
		this.user = uni.getStorageSync('usernameInfo');
		this.initChat();
		this.initJoinRoom();
		this.OnSocketMessage()
	},
	methods: {
		chatItemNum(){
			uni.$on("chatItemNum",msg=>{
				console.log(msg)
				this.allNum = msg
			})
		},
		//一开始所有的用户加入属于自己的房间
		joinRoom(){
			this.socket.emit("join",{
				username:this.user.username,
				realname:this.user.realname
			})
		},
		sendMessageToStartChat(){
			uni.$emit("sendStartChat",this.chatData)
		},
		initJoinRoom() {
			this.socket.emit('online', {
				username: this.user.username,
				realname: this.user.realname
			});
		},
		OnSocketMessage() {
			this.socket.on('message', msg => {
				this.chatData.push(msg);
				this.sendMessageToStartChat()
				if (msg.type === 'notice') {
					return;
				} else {
					if (this.currentMenuItem.find(item => item.username === msg.username)) {
						this.currentMenuItem.indexOf(msg.username);
						this.currentMenuItem.forEach((element, index) => {
							if (element.username === msg.username) {
								// 如果相同用户发了很多消息
								if (element.message !== msg.message) {
									//判断上一个消息和当前消息是否相同
									element.message = msg.message;
								}
								this.currentMenuItem.splice(index, 1);
								this.currentMenuItem.unshift(element);
							}
						});
					} else {
						//深拷贝
						let a = JSON.parse(JSON.stringify(msg));
						this.currentMenuItem.unshift(a);
					}
				}
			});
		},
		initContent(item) {
			uni.request({
				url: 'https://www.ttzxh.icu:443/api/chat/search',
				data: {
					username: item.username||this.user.username,
					Tousername: '2628735401'
				},
				success: res => {
					console.log(res);
					this.chatData = res.data.error === -1 ? res.data.data : [];
					glob.setChatItem(this.chatData)
					if (this.user.status === '876ea4f21078c7d38e3b0bdc74a') {
						      this.socket.emit("leave", {
						        username: this.lastUsername,
						        realname: this.user.realname,
						      });
									this.lastUsername = item.username
						this.socket.emit("join",{
							username:item.username,
							realname:this.user.realname
						})
						uni.navigateTo({
							url: `/pages/chat/startChat?realname=${item.realname}&username=${item.username}`
						});
					} else {
						uni.navigateTo({
							url: '/pages/chat/startChat?realname=ttzxh'
						});
					}
				},
				fail: () => {
					//错误回调
				}
			});
		},
		initChat() {
			uni.request({
				url: 'https://www.ttzxh.icu:443/api/chat/lastSearch',
				success: res => {
					if (res.data.error === -1) {
						this.currentMenuItem = res.data.data;
					} else {
						this.currentMenuItem = [];
					}
					this.userData = this.currentMenuItem.filter((item)=>{
						return item.username === this.user.username
					})
				},
				fail: () => {
					//错误回调
				},
				complete: () => {
					
					
				}
			});
		},
	},
	beforeDestroy() {
		uni.$off("chatItemNum")
	},
	activated() {
	}
};
</script>

<style lang="scss" scoped>
.chat {
	background-color: #fff;
	margin: 15px 0px;
	border-radius: 9px;
	padding: 3px 0 9px 0;
	.chatWidthMe {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 15px;
		.leftImg {
			margin-right: 5px;
			width: 50px;
			height: 50px;
			border-radius: 50%;
			background-color: #ddd;
		}
		.center {
			flex-basis: 400upx;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 1;
			overflow: hidden; //盒子溢出隐藏
			.time {
				text-align: left;
				color: #888;
				height: 14px;
				font-size: 14px;
				margin-bottom: 2px;
			}
			.name {
			}
			.content {
				color: #888;
				font-size: 15px;
			}
		}
		.right {
			display: flex;
			align-items: center;
			margin-left: 10px;
			
		}
	}
}
</style>
